<template>
	<div>
		<div class="bar-top">
			<search-bar :batch_title="batch_title" :status="status" @getWorkExamBatchList="getWorkExamBatchList"></search-bar>
		</div>
		<div class="oe-major-exam" v-loading="loading">
			<div class="oe-content-list" v-if="list.length > 0">
				<div class="oe-content-lis clearfix" v-for="(item, index) in list" :key="index">
					<!-- <div class="oe-lis-mess fl">
						<h3 class="oe-lis-h">{{ item.Title }}</h3>
						<div class="oe-lis-time">
							<p class="oe-lis-p">考试时间：{{ item.StartTime }}至{{ item.EndTime }}</p>
							<p class="oe-lis-p">
								<span style="margin-right: 10px;" v-if="item.Address">考试地点：{{ item.Address }}</span>请提前{{ item.AdvanceTime }}分钟登录
							</p>
						</div>
					</div> -->

					<div class="lis-mess">
						<div class="left">
							<div class="test-title">{{ item.Title }}</div>
							<div class="test-time">考试时间：{{ item.StartTime }}至{{ item.EndTime }}</div>
							<div class="test-address">
								<span v-if="item.Address">考试地点：{{ item.Address }} </span> 请提前{{ item.AdvanceTime }}分钟登录
							</div>
						</div>
						<div class="right">
							<div class="about-start">
								即将开始
							</div>

						</div>
					</div>

					<div class="oe-lis-statu-down" v-if="item.ExamMode == 1">线下</div>
					<div class="oe-lis-statu" style="background: #EDA784;" v-if="item.IsRepair">补考</div>
					<span class="oe-lis-span" style="margin-top:5px;">要求：{{ item.Remark || '暂无要求' }}</span>
				</div>
			</div>
			<div v-else class="no-data">暂无数据</div>
			<div style="text-align: center;" v-if="list.length > 0">
				<a-pagination v-model="pagination.pageIndex" :total="pagination.totalCount" showSizeChanger :show-total="total => `共 ${total} 条`" @change="getChange" @showSizeChange="getSizeChange" />
			</div>
		</div>

	</div>
</template>

<script>
import searchBar from '../components/search-bar.vue';
export default {
	components: {
		searchBar,
	},
	data() {
		return {
			homeWorkName: '',
			// batchId: 'u5b2ac6r64hkg3em8xunww',
			batchId: localStorage.getItem('bacthId'),
			sortId: localStorage.getItem('sortId') || '',
			list: [
				// {
				// 	Id: '1',
				// 	Title: '建筑工程计价新增',
				// 	StartTime: '2021-12-31 18:30:00',
				// 	EndTime: '2021-12-31 19:35:00',
				// 	AdvanceTime: '5',
				// 	State: '-1',
				// 	GetScore: '',
				// 	ExamScore: '',
				// 	IsShowAnswerRecordPublish: '',
				// 	ExamMode: '',
				// 	IsRepair: '',
				// 	Remark: '',
				// },
			],
			pagination: {
				totalCount: 0, // 总数,
				pageSize: 10, //每页个数,
				pageIndex: 1, //第几页,
			},
			loading: false,
			status: '即将开始',
		};
	},
	created() {
		this.batch_title = JSON.parse(localStorage.getItem('sortItem')).Title;
	},
	mounted() {
		this.getWorkExamBatchList();
	},
	methods: {
		getWorkExamBatchList() {
			this.loading = true;
			this.$http
				.post('/api/study/workexam/getWorkExamBatchList', {
					type: 2, //考试的状态：1->正在进行，2->即将开始，3->已经截止
					batchId: this.batchId || '', //分类Id
					sortId: this.sortId,
					homeWorkName: this.homeWorkName || '',
					pageSize: this.pagination.pageSize,
					page: this.pagination.pageIndex,
				})
				.then((res) => {
					this.loading = false;
					localStorage.setItem('sortId', this.sortId);
					if (res.code > 0) {
						this.list = res.list;
						this.pagination = res.pagination;
					} else {
						this.$message.error(res.msg);
					}
				});
		},
		getChange(value) {
			this.pagination.pageIndex = value;
			this.getWorkExamBatchList();
		},
		getSizeChange(current, size) {
			this.pagination.pageSize = size;
			this.getWorkExamBatchList();
		},
	},
};
</script>
